import React from 'react';
import { Empty } from 'antd';
import { history } from 'umi'
import ReactEcharts from '@/components/Echarts';

const ZpqkChart = ({ data }) => {
    // lengend设计需要展示较多的信息，formater无法获取abc,且只能接收string
    const totalValue = data.reduce((prev, cur) => prev + cur.value, 0);
    const legendValue = data.map(item => item.value);
    const percentValue = data.map(item => {
        if (!item.value) {
            return '--';
        }
        return ((item.value / totalValue) * 100).toFixed(2);
    });
    const Map = {
        未开始: legendValue[0],
        进行中: legendValue[1],
        待入职: legendValue[2]
    };
    const percentMap = {
        未开始: percentValue[0],
        进行中: percentValue[1],
        待入职: percentValue[2]
    };
    const getOption = echartData => {
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            legend: {
                formatter: name => `${name} | ${Map[name]}人 / ${percentMap[name]}%`,
                orient: 'vertical',
                right: 40,
                top: 40,
                bottom: 20,
                textStyle: { fontSize: 12, color: '#999' }
            },
            series: [
                {
                    type: 'pie',
                    label: false,
                    radius: '65%',
                    center: ['30%', '45%'],
                    selectedMode: 'single',
                    data: echartData
                }
            ]
        };
        return option;
    };
    const handleChartClick = ({ name }) => {
        if (name === '待入职') {
            history.push('office/personnel/onboardAndLeave/entryManagement');
        } else {
            history.push('/office/personnelManagement/recruit/position');
        }
    };

    return (
        <div>
            {!data || data.length === 0 ? (
                <Empty style={{ margin: '89px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <ReactEcharts onEvents={{ click: handleChartClick }} option={getOption(data)} />
            )}
        </div>
    );
};

export default ZpqkChart;
